<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link href="../style.css" rel="stylesheet" />
    <link rel="stylesheet" href="../vendor/element/index.css">
    <link rel="icon" href="../favicon.ico">
</head>

<body>
<div class="app" id="app" v-cloak>
    <div id="login" :style="{backgroundImage: `url(${picture})`}">
        <el-form
                ref="loginForm"
                :model="loginForm"
                :rules="rules"
                class="login-container"
                label-position="left"
                label-width="80px"
        >
            <h3 class="login_title">系统登录</h3>
            <el-form-item label="登录账号" prop="account">
                <el-input v-model="loginForm.account" type="text" clearable auto-complete="off" placeholder="账号"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="loginForm.password " type="password" clearable auto-complete="off" placeholder="密码"/>
            </el-form-item>
            <!-- 验证码 -->
            <div class="validCode">
                <el-form-item prop="validCode">
                    <el-input v-model="loginForm.validCode " style="width:130px" auto-complete="off" placeholder="验证码" @keyup="userLogin()"/>
                </el-form-item>
                <div
                        :style="`width:120px; height:40px;`"
                        class="code"
                        @click="refreshCode"
                >
                        <span
                                v-for="(item, index) in codeList"
                                :key="index"
                                :style="getStyle(item)"
                        >{{ item.code }}</span>
                </div>
            </div>

            <div class="btn-box">
                <el-button type="primary" style="width: 100%;background: rgba(56,56,56,0.6);border: none" @click="userLogin">登录</el-button>
            </div>
        </el-form>
    </div>
</div>
<!--vue-->
<script src="../vendor/vue/vue.min.js"></script>
<!--element-->
<script src="../vendor/element/index.js"></script>
<!--引入axios-->
<script src="../vendor/axios/axios.min.js"></script>
<script src="../app.js" lang="javascript"></script>
<script>

    var code = ''
    // 验证输入得验证码是否正确
    const validateValidCode = (rule, value, callback) => {
            if (value === code) {
                callback()
            } else {
                callback('验证码有误')
            }
        }
    // 构建Vue实例
   let vn = new Vue({
        el: '#app',
        data: {
            loginForm: {
                account: '',
                password: '',
                validCode: ''
            },
            rules: {
                account: [{ required: true, message: '请输入登录账号', trigger: "blur" }],
                password: [{ required: true, message: '请输入密码', trigger: "blur" }],
                validCode: [{ required: true, message: '请输入验证码', trigger: 'blur' },
                    { validator: validateValidCode, trigger: 'blur' }]
            },
            loading: false,
            codeList: [],
            picture:'', //背景图片
        },
        methods: {
            //登录
            userLogin () {
                this.$refs['loginForm'].validate(valid => {
                    if (valid) {
                        const para = {
                            account: this.loginForm.account,
                            password: this.loginForm.password
                        };
                        _axios.post('/login', para).then(res => {
                            if(res.code === 200){
                                // 用户登陆成功后返回的数据
                                localStorage.setItem('token', res.data.token); // sessionStorage.setItem(TokenKey, token) 本地存储token
                                window.location.replace('./index.html') //登录成功跳转
                            }else{
                                this.$message({
                                    message: res.msg || '请求失败',
                                    type: 'error'
                                });
                            }

                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },

            //刷新验证码
            refreshCode() {
                this.createdCode()
            },
            createdCode() {
                const len = 4
                const codeList = []
                const chars = '0123456789'
                const charsLen = chars.length
                // 生成
                for (let i = 0; i < len; i++) {
                    const rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]
                    codeList.push({
                        code: chars.charAt(Math.floor(Math.random() * charsLen)),
                        color: `rgb(${rgb})`,
                        fontSize: `${10 + (+[Math.floor(Math.random() * 10)] + 6)}px`,
                        padding: `${[Math.floor(Math.random() * 10)]}px`,
                        transform: `rotate(${Math.floor(Math.random() * 30) - Math.floor(Math.random() * 30)}deg)`
                    })
                }
                // 指向
                this.codeList = codeList
                // 将当前数据派发出去
                code = codeList.map(item => item.code).join('')
            },
            getStyle(data) {
                return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`
            },
            /**获取背景图片*/
            getImage(type){
                _axios.get('/load').then(res => {
                    if(res.code === 200){
                        this.picture = res.data.shortName ? `http://106.54.165.67:8080${res.data.shortName}` : '../mum.jpg'
                        localStorage.setItem('picture', res.data.shortName); // sessionStorage.setItem(TokenKey, token) 本地存储token
                    }else{
                        this.$message({
                            message: res.msg || '请求失败',
                            type: 'error'
                        });
                    }
                })
            },
        },
        created() {
            this.createdCode()
            this.getImage()
        }
    })

</script>
</body>
</html>
